<script setup>
import MoniterItem from '@/components/MoniterItem.vue'
import { onMounted, inject, reactive, nextTick } from 'vue'

const $axios = inject('$axios')

onMounted(() => {
  getBackHomeCount()
})

function autoScroll() {
  const el = document.querySelector('#aitTableList')
  const elHeight = el.offsetHeight
  const sHeight = el.scrollHeight
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++
    } else {
      el.scrollTop = 0
    }
  }, 50)
}

function openWindow() {
  window.open('http://36.99.193.53:90/admin/#/yq/PersonBackHome')
}
function getBackHomeCount() {
  $axios
    .get('person_back_home/backHomeSum')
    .then(res => {
      res.data.data.forEach(item => {
        tableData.push({
          number: item.orders,
          palce: item.village,
          added: item.newToday,
          count: item.total,
          reded: item.reds,
          yellowed: item.yellows,
          quarantine: item.focus,
          home: item.home,
        })
      })
    })
    .then(nextTick)
    .then(() => {
      autoScroll()
    })
}

const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
])
</script>

<template>
  <div class="aiBox">
    <div class="title">监控AI与场所码</div>

    <div class="tableBox">
      <div class="line">
        <div style="flex: 1">场所名称</div>
        <div style="flex: 1">AI识别人流</div>
        <div style="flex: 1">车辆流量</div>
      </div>
      <div class="table scroll" id="aitTableList">
        <div class="tr" v-for="(item, index) in tableData" :key="index" ref="tableRef">
          <div style="flex: 1" class="ellipsis2">
            <el-tooltip
              effect="dark"
              :disabled="!(item?.palce?.length > 4)"
              :content="item.palce"
              placement="top"
            >
              {{ item.palce }}
            </el-tooltip>
          </div>
          <div style="flex: 1">{{ item.number }}</div>
          <div style="flex: 1">{{ item.added }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.aiBox {
  width: 340px;
  height: 546px;
  background-image: url('@/assets/community/boxbg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tableBox {
    flex: 1;
    padding: 0 17px 24px 17px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .line {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      height: 20px;
      padding: 16px;
      font-size: 14px;
      color: #ffffff;
    }
    .table {
      flex: 1;
      width: 100%;
      overflow: hidden auto;

      .tr {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 56px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;

        &:nth-child(odd) {
          background: rgba(19, 181, 177, 0.4);
        }
      }
    }
  }
}
</style>
